<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--4.制作4个嵌套DIV ，要求：
      1.每个父DIV尺寸必须大于子DIV
      2.实现每个DIV在父DIV正中间
      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
      4.通过最底层DIV，打印每层父DIV，如：
	1级父元素为（），1级父节点为（）
	2级父元素为（），2级父节点为（）
	....
      5.查找每个DIV的子元素和子对象-->
      <style type="text/css">
      	#div1{
      		width:400px;
      		height:400px;
      		background-color: #00FFFF;
      		text-align: center;
      	}
      	#div2{
      		width:300px;
      		height:300px;
      		background-color: #FAEBD7;
      		text-align: center;
      		margin: auto;
      	}
      	#div3{
      		width:200px;
      		height:200px;
      		background-color: aquamarine;
      		text-align: center;
      		margin: auto;
      	}
      	#div4{
      		width:100px;
      		height:100px;
      		background-color: beige;
      		text-align: center;
      		margin: auto;
      	}
      </style>
	</head>
	<body>
		<div id="div1">
			<p>这里是div1</p>
			<div id="div2">
				<p>这里是div2</p>
				<div id="div3">
					<p>这里是div3</p>
					<div id="div4">
						<p>这里是div4</p>
					</div>
				</div>
			</div>
		</div>
		<input type="button" name="" id="" value="获取父元素" onclick="fuyuansu()" />
		<input type="button" name="" id="" value="获取父节点" onclick="fujiedian()" />
		<input type="button" name="" id="" value="获取子元素和子节点" onclick="zi()" />
	</body>
	<script type="text/javascript">
		function fuyuansu(){
			var div4=document.getElementById('div4');
			console.log(div4.parentElement);
			console.log(div4.parentElement.parentElement);
			console.log(div4.parentElement.parentElement.parentElement);
			console.log(div4.parentElement.parentElement.parentElement.parentElement);
			console.log(div4.parentElement.parentElement.parentElement.parentElement.parentElement);
			}
		function fujiedian(){
			var div4=document.getElementById('div4');
			console.log(div4.parentNode);
			console.log(div4.parentNode.parentNode);
			console.log(div4.parentNode.parentNode.parentNode);
			console.log(div4.parentNode.parentNode.parentNode.parentNode);
			console.log(div4.parentNode.parentNode.parentNode.parentNode.parentNode);
			console.log(div4.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode);
		}
		function zi(){
			var div1=document.getElementById('div1');
			var div2=document.getElementById('div2');
			var div3=document.getElementById('div3');
			var div4=document.getElementById('div4');
			console.log('子元素');
			console.log(div1.children);
			console.log(div2.children);
			console.log(div3.children);
			console.log(div4.children);
			console.log('子节点');
			console.log(div1.childNodes);
			console.log(div2.childNodes);
			console.log(div3.childNodes);
			console.log(div4.childNodes);
		}
	</script>
</html>
